<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>

  /*要对一个元素设置混合模式，有两个属性可以派上用场：mix-blendmode
可以为整个元素设置混合模式，background-blend-mode 可以为每层
背景单独指定混合模式。这意味着，如果用这个方案来处理图片，我们实际
上有两种选择。不过这两者各有所短。
 第一种选择：需要把图片包裹在一个容器中，并把容器的背景色设
置为我们想要的主色调。
 第二种选择：不用图片元素，而是用 <div> 元素——把这个元素的
第一层背景设置为要染色的图片，并把第二层的背景设置为我们想
要的主色调。*/
a {
background: hsl(335, 100%, 50%);
display: inline-block;
transition: .5s background-color;
}
a:hover {
background: green;
}
img {
mix-blend-mode: luminosity;
}
.tinted-image {
width: 640px; height: 440px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}
.tinted-image:hover {
background-color: transparent;
}
</style>
<body>
  <a href="#something">
     <img src="../adam-catlace.png" alt="">
  </a>
<div class="tinted-image"
style="background-image:url(../adam-catlace.png)">
</div>
</body>
</html>